<template>
<!--pages/topicality/yqdengji/broadcast/broadcast.wxml-->

<view class="content-border">
  <view class="border-title">
    <view>全国疫情中高风险地区名单</view>
    <view class="time">截至{{time}}</view>
  </view>
  <view class="info">
    <view class="height">
      <view class="height-title" v-if="height">高风险地区</view>
      <view v-for="(value, key) in height" :key="key" class="info-list">
        <view class="province flex between align-center">
          <span>{{key}}</span>
          <!-- <a href="">疫情动态 ></a> -->
        </view>
        <view class="info-detail">
          <view v-for="(item, index) in value" :key="index" class="flex align-center li">
            <span>{{item}}</span>
          </view>
        </view>
      </view>
    </view>
    <view class="middle">
      <view class="middle-title" v-if="middle">中风险地区</view>
      <view v-for="(value, key) in middle" :key="key" class="info-list">
        <view class="province flex between align-center">
          <span>{{key}}</span>
          <!--  <a href="">疫情动态 ></a> -->
        </view>
        <view class="info-detail">
          <view v-for="(item, index) in value" :key="index" class="flex align-center li">
            <span>{{item}}</span>
          </view>
        </view>
      </view>

    </view>
    <view class="none" v-if="!height&&!middle">
      全国暂时没有中高风险地区哦~
    </view>
  </view>
</view>
</template>

<script>
// pages/topicality/yqdengji/broadcast/broadcast.js
const util = require("../../../../utils/util.js");
const app = getApp();

export default {
  data() {
    return {
      middle: {},
      height: {},
      time: '',
      key: ""
    };
  },

  components: {},
  props: {},

  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) {
    util.getUrl(app.globalData.url).then(e => {
      this.render();
    });
  },

  /**
   * 生命周期函数--监听页面初次渲染完成
   */
  onReady: function () {},

  /**
   * 生命周期函数--监听页面显示
   */
  onShow: function () {},

  /**
   * 生命周期函数--监听页面隐藏
   */
  onHide: function () {},

  /**
   * 生命周期函数--监听页面卸载
   */
  onUnload: function () {},

  /**
   * 页面相关事件处理函数--监听用户下拉动作
   */
  onPullDownRefresh: function () {},

  /**
   * 页面上拉触底事件的处理函数
   */
  onReachBottom: function () {},

  /**
   * 用户点击右上角分享
   */
  onShareAppMessage: function () {
    return {
      title: "全国疫情中高风险地区名单"
    };
  },
  methods: {
    render() {
      util.request('zhuanti.php', {
        action: 'fxdengji'
      }, 'POST').then(e => {
        this.setData({
          middle: e.data.data.中风险 || '',
          height: e.data.data.高风险 || '',
          time: e.data.data.time
        });
      });
    }

  }
};
</script>
<style>
    /* pages/topicality/yqdengji/broadcast/broadcast.wxss */

    .content-border {
      box-sizing: border-box;
      margin: 0 auto;
      width: 702rpx;
      padding: 26rpx 24rpx;
      font-size: 27rpx;
      color: #666666;
      background-color: #FFFFFF;
      border-radius: 22rpx;
  }

  .border-title {
      padding-bottom: 27rpx;
      margin-bottom: 26rpx;
      font-size: 31rpx;
      color: #333333;
      border-bottom: 1rpx solid #EAEAEA;
  }

  .time {
      margin-top: 13rpx;
      font-size: 25rpx;
      color: #999999;
  }

  .height-title {
      margin-bottom: 26rpx;
      font-size: 31rpx;
      color: #F13F3F;
  }

  .middle-title {
      font-size: 31rpx;
      color: #FF9934;
      margin-bottom: 26rpx;
  }

  .province {
      padding: 15rpx 22rpx;
      margin-bottom: 28rpx;
      font-size: 29rpx;
      color: #333333;
      text-align: justify;
      background-color: #F7F7F7;
      border-radius: 13rpx;
  }

  .info-detail {
      padding: 0;
  }

  .info-detail .li {
      margin-left: 20rpx;
      position: relative;
      margin-bottom: 25rpx;
      line-height: 40rpx;
  }
  .info-detail .li ::before{
      content: '';
      width: 11rpx;
      height: 11rpx;
      background-color: #FF9A31;
      position: absolute;
      border-radius: 50%;
      left: -20rpx;
      top: 15rpx;
  }
  
</style>